<template>
  <!-- 轮播图 -->
  <div class="home">
    <el-carousel height="450px">
      <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
        <img :src="'http://106.15.179.105:3000/' + item.imgPath" alt="" />
      </el-carousel-item>
    </el-carousel>
    <div class="main">
      <!-- 手机 -->
      <div class="content">
        <div class="box-hd">
          <div class="title">手机</div>
        </div>
        <div class="box-bd">
          <div class="promo-list">
            <img
              src="http://106.15.179.105:3000/public/imgs/phone/phone.png"
              alt=""
            />
          </div>
          <div class="list">
            <goods-list :isMore="true" :goodsData="phoneList"></goods-list>
          </div>
        </div>
      </div>
      <!-- 家电 -->
      <div class="appliance">
        <div class="box-hd">
          <div class="title">家电</div>
          <div class="more">
            <myAdd :val="2" @child="getChildMsg">
              <span slot="1">热门</span>
              <span slot="2">电视影音</span>
            </myAdd>
          </div>
        </div>
        <div class="box-bd">
          <div class="promo-list">
            <ul>
              <li>
                <img
                  src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png"
                />
              </li>
              <li>
                <img
                  src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png"
                />
              </li>
            </ul>
          </div>
          <div class="list">
            <goods-list :isMore="true" :goodsData="applianceList"></goods-list>
          </div>
        </div>
      </div>
      <!-- 配件商品 -->
      <div class="accessory" id="promo-menu">
        <div class="box-hd">
          <div class="title">配件</div>
          <div class="more" id="more">
            <myAdd :val="3" @child="getChildMsg2">
              <span slot="1">热门</span>
              <span slot="2">保护套</span>
              <span slot="3">充电器</span>
            </myAdd>
          </div>
        </div>
        <div class="box-bd">
          <div class="promo-list">
            <ul>
              <li>
                <img
                  src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png"
                  alt=""
                />
              </li>
              <li>
                <img
                  src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo2.png"
                  alt=""
                />
              </li>
            </ul>
          </div>
          <div class="list">
            <goods-list :isMore="true" :goodsData="accessoryList"></goods-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../http/api";
import myAdd from "../components/myAdd.vue";
// import { log } from 'util';
export default {
 data() {
    return {
      // 轮播图数据
      carousel: [],
      // 手机商品数据
      phoneList: [],
      TVlist: [],
      applianceList: [],
      applianceHotList: [],
      applianceActive: 1,
      accessoryList: [],
      protectingShellList: [], 
      chargerList: [],
      accessoryHotList:[],
      accessoryActive: 1,
    };
  },
  components: {
    myAdd,
  },
  created() {
      this.getCarousel(),
      this.getProduct(),
      this.getTV(),
      this.getAppliance(),
      this.getProtect(),
      this.getCharger(),
      this.getAccessory();
  },
  methods: {
    async getCarousel() {
      let res = await api.getCarousel();
      this.carousel = res.data.carousel;
    },
    async getProduct() {
      let { data: res } = await api.getPromoProduct({ categoryName: "手机" });
      this.phoneList = res.Product;
    },
    async getAppliance() {
      let { data: res } = await api.getHotProduct({
        categoryName: ["电视机", "空调", "洗衣机"]
      });
      console.log(res);
      this.applianceList = res.Product;
    },
    async getTV() {
      let { data: res } = await api.getPromoProduct({ categoryName: "电视机" });
      this.TVlist = res.Product;
    },

    async getProtect() {
      let { data: res } = await api.getPromoProduct({ categoryName: "保护套" });
      this.protectingShellList = res.Product;
    },
    async getCharger() {
      let { data: res } = await api.getPromoProduct({ categoryName: "充电器" });
      this.chargerList = res.Product;
    },
    async getAccessory() {
      let { data: res } = await api.getHotProduct({
        categoryName: ["保护套", "保护膜", "充电器", "充电宝"]
      });
      console.log(res);
      this.accessoryList = res.Product;
    },

    // 家电数据
    getChildMsg(val) {
      this.applianceActive = val;
    },

    getChildMsg2(val) {
      this.accessoryActive = val;
    }
  },
  watch: {
    applianceActive: function(val) {
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
        // 1为热门商品
        this.applianceList = this.applianceHotList;
        console.log("111")
        return;
      }
      if (val == 2) {
        // 2为电视商品
        this.applianceList = this.TVlist;
        console.log("222");
        return;
      }
    },
    accessoryActive: function(val) {
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        // 1为热门商品
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        // 2为保护套商品
        this.accessoryList = this.protectingShellList;
        return;
      }
      if (val == 3) {
        //3 为充电器商品
        this.accessoryList = this.chargerList;
        return;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  background: #f5f5f5;
  padding-bottom: 20px;
  margin-top: 20px;
}
.el-carousel {
  margin: 0 auto;
  max-width: 1225px;
}
.content,
.appliance,
.accessory {
  margin: 0 auto;
  max-width: 1225px;
}

.box-hd {
  height: 58px;
  margin: 20px 0 0 0;
}

.box-hd .title {
  float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}

.box-hd .more {
  float: right;
}

.box-hd .more a {
  font-size: 16px;
  line-height: 58px;
  color: #424242;
}

.box-hd .more a:hover {
  color: #ff6700;
}

.box-bd {
  height: 615px;
}

.box-bd .promo-list {
  float: left;
  height: 615px;
  width: 234px;
}

.box-bd .promo-list li {
  z-index: 1;
  width: 234px;
  height: 300px;
  margin-bottom: 14.5px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.box-bd .promo-list li:hover {
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}

.box-bd .promo-list li img {
  width: 234px;
  height: 300px;
}

.box-bd .promo-list img {
  width: 234px;
}
</style>
